<template>
	<view class="app">
		<page-header ref="homeHeader"></page-header>
		<view v-if="authLocationStatus">
			<view class="nearby">
				<u-divider half-width="80" color="#999999" fontSize="28" bgColor="#F7F7F7" borderColor="#DDDDDD">附近空间</u-divider>
			</view>
			<page-nearby ref="nearby"></page-nearby>
			<u-sticky :offset-top="(navigationBarHeight + statusBarHeight) * 2">
				<view class="home-tabs">
					<view class="tab-item" :class="[option == 1 ? 'active' : null]" @click="onTabChange(1)">
						热门<image src="../../static/header/icon_sub.png" mode=""></image>
					</view>
					<view class="tab-item" :class="[option == 2 ? 'active' : null]" @click="onTabChange(2)">
						最新<image src="../../static/header/icon_sub.png" mode=""></image>
					</view>
				</view>
			</u-sticky>
			<view v-show="option == 1">
				<view class="detail-section" v-show="bubbleStatus">
					<detail-block v-for="(item, index) in bubbleTable" :key="index" :item="item"></detail-block>
				</view>
				<view style="padding-top: 32rpx;" v-show="!bubbleStatus">
					<empty type="empty" :showButton="false"></empty>
				</view>
			</view>
			<view v-show="option == 2">
				<view class="detail-section" v-show="bubbleStatus2">
					<detail-block v-for="(item, index) in bubbleTable2" :key="index" :item="item"></detail-block>
				</view>
				<view style="padding-top: 32rpx;" v-show="!bubbleStatus2">
					<empty type="empty" :showButton="false"></empty>
				</view>
			</view>
		</view>
		<view v-show="!authLocationStatus" style="padding-top: 32rpx;">
			<empty type="address" @onReload="getAddressPoint"></empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import pageHeader from './components/home-head.vue'
	import empty from '../../components/empty.vue'
	import pageNearby from './components/page-nearby.vue'
	import detailBlock from './components/detail-block.vue'
	import location from '../../common/js/location.js'
	import storage from '@/common/js/storage';
	export default {
		mixins: [location],
		components: {
			pageHeader,
			pageNearby,
			empty,
			detailBlock
		},
		data() {
			return {
				current: 0,
				showStatus: true,
				authLocationStatus: false,
				bubbleTable: [],
				bubbleStatus: true,
				option: 1,
				pageInfo: {
					option: 1,
					currentPage: 1,
					totalPage: 10
				},
				bubbleTable2: [],
				bubbleStatus2: true,
				pageInfo2: {
					option: 2,
					currentPage: 1,
					totalPage: 10
				},
			};
		},
		computed: {
			...mapState(["addressInfo", 'authLocation', 'dicTypeList'])
		},
		computed: {
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
		},
		onLoad() {
			
		},
		async onPullDownRefresh() {
			await this.$refs.homeHeader.getClockMsg()
			await this.$refs.nearby.__init()
			await this.bubbleList()
			await this.bubbleList2()
			uni.stopPullDownRefresh()
		},
		onShow() {
			this.initCurrentUser()
			this.pageInfo.currentPage = 1
			this.bubbleTable = []
			this.authLocationStatus = this.authLocation == 1 ? true : false
			if(!this.authLocationStatus) {
				this.onLocation(this.setAddress)
			} else {
				this.bubbleList()
				this.bubbleList2()
			}
		},
		onReachBottom() {
			let pageInfo = this.pageInfo
			if(pageInfo.currentPage < pageInfo.totalPage) {
				pageInfo.currentPage = pageInfo.currentPage + 1
				this.bubbleList()
			}
			
			let pageInfo2 = this.pageInfo2
			if(pageInfo2.currentPage < pageInfo2.totalPage) {
				pageInfo2.currentPage = pageInfo2.currentPage + 1
				this.bubbleList2()
			}
		},
		methods: {
			onTabChange(num) {
				this.option = num
				// this.bubbleStatus = true
				// this.bubbleTable = []
				// this.bubbleList()
			},
			bubbleList() {
				this.pageInfo.lat = this.addressInfo.lat
				this.pageInfo.lng = this.addressInfo.lng
				this.$u.get('/paopao/mini/space/queryPaoPaoList', this.pageInfo).then(res => {
					if(res && res.status == -1) { return }
					this.bubbleTable.push(...res.items)
					this.pageInfo.totalPage = res.totalPage
					if(this.bubbleTable.length > 0) {
						this.bubbleStatus = true
					} else {
						this.bubbleStatus = false
					}
				})
			},
			bubbleList2() {
				this.pageInfo2.lat = this.addressInfo.lat
				this.pageInfo2.lng = this.addressInfo.lng
				this.$u.get('/paopao/mini/space/queryPaoPaoList', this.pageInfo2).then(res => {
					if(res && res.status == -1) { return }
					this.bubbleTable2.push(...res.items)
					this.pageInfo2.totalPage = res.totalPage
					if(this.bubbleTable2.length > 0) {
						this.bubbleStatus2 = true
					} else {
						this.bubbleStatus2 = false
					}
				})
			},
			async setAddress() {
				let _this = this
				let authLocation = uni.getStorageSync('authLocation')
				if(authLocation == 1) {
					this.authLocationStatus = true
					this.geo((res) => {
						let tempRes = res
						_this.getAddressInfo({
							latitude: tempRes.latitude,
							longitude: tempRes.longitude
						}, () => {
							_this.$refs.nearby.getNearbySpace()
							_this.bubbleList()
							_this.bubbleList2()
						})
					})
				} else {
					this.getAddressPoint()
				}
			},
			async getAddressPoint() {
				let _this = this
				// 获取定位
				this.getAuthLocation(() => {
					_this.authLocationStatus = true
					_this.geo((res) => {
						_this.getAddressInfo({
							latitude: res.latitude,
							longitude: res.longitude
						}, () => {
							_this.$refs.nearby.getNearbySpace()
							_this.bubbleList()
							_this.bubbleList2()
						})
					})
				})
			},
			async initCurrentUser() {
			    let currentUser = storage.get('userInfo');
				if(currentUser) {
					this.$store.commit('setUserInfo', currentUser)
				}
			},
		}
	}
</script>

<style lang="less">
@import url("../../common/css/var.less");
.app{
	padding-bottom: 20rpx;
	background-color: #F7F7F7;
	min-height: calc(100vh - 20rpx);
}
.nearby {
	padding: 16rpx 0 16rpx;
}
.home-tabs {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	padding: 0 15%;
	background-color: #F7F7F7;
	image {
		width: 32rpx;
		height: 12rpx;
		opacity: 0;
	}
	.tab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 0 24rpx;
		color: @tText;
		font-size: 36rpx;
		&.active {
			color: @mText;
			image {
				opacity: 1;
				transition: all ease .2s;
			}
		}
	}
}
.detail-section {
	padding: 0 32rpx 32rpx;
}
</style>
